<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#lunbo {
				width: 1200px;
				height: 450px;
				position: relative;
				margin: 0 auto;
			}

			img {
				width: 1200px;
				height: 450px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="lunbo">
			<img src="img/lunbo1.jpg" />
			<img src="img/lunbo2.jpg" />
			<img src="img/lunbo3.jpg" />
			<img src="img/lunbo4.jpg" />
			<img src="img/lunbo5.jpg" />
		</div>
	</body>
	<script>
		function setOpacity(img, opacity) {
			img.style.opacity = opacity;
		}
		let arr = document.getElementsByTagName("img");
		//除了第0张图，其余的初始状态下都是透明的。
		for (let i = 1; i < arr.length; i++) {
			arr[i].style.opacity = 0;
		}
		let useOpacity = 0;
		let param1;
		let param2;

		function swap() {
			let img1 = param1;
			let img2 = param2;
			//让两个图片img1和img2的透明度都是逐渐变化的。
			//img1的透明度由1->0
			//img2的透明度由0->1
			setOpacity(img1, (100 - useOpacity) / 100);
			setOpacity(img2, useOpacity / 100);
			useOpacity++;
			if (useOpacity == 100) {
				useOpacity = 0;
				// setTimeout("swap()",10);
			} else {
				setTimeout("swap()", 10);
			}
		}
		let showIndex = 0;

		function lunbo() {
			if (showIndex < 4) {
				param1 = arr[showIndex];
				param2 = arr[showIndex + 1];
			} else {
				param1 = arr[showIndex];
				param2 = arr[0];
				showIndex = -1;
			}
			showIndex++;
			swap();
			setTimeout("lunbo()", 3000);
		}
		lunbo();
	</script>
</html>